Text fields 文字輸入框

Filled text field  填充文字欄位

1 Container 2 Leading icon (optional) 3 Label text (empty) 4 Label text (populated) 5 Trailing icon (optional) 6 Active lndicator (focused) 7 Caret 8 Input text 9 Supporting text (optional) 10 Active Indicator (enabled)

Filled text field states  填充文字欄位狀態

1 Enabled (empty)已啟用(空白) 2 Focused (empty)聚焦(空) 3 Hovered (empty)懸停(空) 4 Disabled (empty)禁用(空) 5 Enabled (populated)啟用(已填充) 6 Focused (populated)聚焦(已填充) 7 Hovered (populated)懸停(已填充) 8 Disabled (populated)禁用(已填充)

Filled text field error states填充式文字框錯誤狀態

錯誤狀態用紅色顯示提醒使用者有問題。系統會在文字框下方顯示如何解決問題的提示，這些提示會一直顯示，直到問題解決為止。

1 Enabled (empty)已啟用(空白) 2 Focused (empty)聚焦(空) 3 Hovered (empty)懸停(空) 4 Enabled (populated)啟用(已填充) 5 Focused (populated)聚焦 6 Hovered (populated)懸停(已填充)
Attribute  屬性Value  值
Default container height預設容器高度56dp
Label alignment (unpopulated)標籤對齊（未填充）Vertically centered  垂直居中
Top/bottom padding  上下填充8dp
Left/right padding without icons無圖示時的左右邊距16dp
Left/right padding with icons帶有圖示的左右內邊距12dp
Icon alignment  圖示對齊Vertically centered  垂直居中
Padding between icons and text16dp
Supporting text and character counter top padding4dp
Padding between supporting text and character counter16dp
Target size  目標大小56dp

Filled text field configurations 填充文字欄位配置

1 With supporting text 帶有輔助文字 2 With trailing icon 帶有尾隨圖示 3 With leading icon 帶前置圖示 4 With leading and trailing icon帶有前置和後置圖示 5 With prefix 帶有字首 6 With suffix 帶有字尾 7 Multi-line text field 多行文字欄位

Outlined text field  輪廓文字框

1 Container outline (enabled) 2 Leading icon (optional) 3 Label text (unpopulated) 4 Label text (populated) 5 Trailing icon (optional) 6 Container outline (focused) 7 Caret 8 Input text 9 Supporting text (optional)

Outlined text field states輪廓文字欄位狀態

1 Enabled (empty)已啟用(空白) 2 Focused (empty)聚焦(空) 3 Hovered (empty)懸停(空) 4 Disabled (empty)禁用(空) 5 Enabled (populated)啟用(已填充) 6 Focused (populated)聚焦(已填充) 7 Hovered (populated)懸停(已填充) 8 Disabled (populated)禁用(已填充)

Outlined text field error states輪廓文字欄位錯誤狀態

當文字框出現錯誤時，系統會用紅色顯示提醒。在文字框下方會顯示簡單的解決方法說明，讓使用者知道如何修正問題。這些提示會一直保持顯示，直到使用者解決了問題。

1 Enabled (empty)已啟用(空白) 2 Focused (empty)聚焦(空) 3 Hovered (empty)懸停(空) 4 Enabled (populated)啟用(已填充) 5 Focused (populated)聚焦(已填充) 6 Hovered (populated)懸停(已填充)
Attribute  屬性Value  值
Container height  容器高度56dp
Left/right padding without icons無圖示時的左右邊距16dp
Left/right padding with icons帶有圖示的左右內邊距12dp
Padding between icons and text圖示和文字之間的填充16dp
Icon alignment  圖示對齊Vertically centered  垂直居中
Supporting text and character counter top padding支援文字和字元計數器頂部填充4dp
Padding between supporting text and character counter支援文字和字元計數器之間的填充16dp
Label alignment  標籤對齊方式Vertically centered  垂直居中
Left/right padding populated label text左/右填充標籤文字4dp
Target size  目標大小56dp

Outlined text field configurations 輪廓文字欄位配置

1 With supporting text 帶有輔助文字 2 With trailing icon 帶有尾隨圖示 3 With leading icon 帶前置圖示 4 With leading and trailing icon帶有前置和後置圖示 5 With prefix 帶有字首 6 With suffix 帶有字尾 7 Multi-line text field 多行文字欄位